<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
  .box {
        width: 200px;
        height: 60px;
        border: 1px solid red;
    }
    </style>
  
</head>
<body>
    <!-- ie浏览器缓存问题  在url后面添加?t='+Date.now()  'http://localhost:3000/ie?t='+Date.now() -->
    <button>点击发送json数据</button>
    <div class="box"></div>
    <script>
        const btn = document.querySelector('button');
        const box = document.querySelector('.box');
        
        btn.addEventListener('click',function() {
            // 1.创建对象
            const xhr = new XMLHttpRequest();

            //如果服务端超过1s还不响应数据，就取消请求
            xhr.timeout = 1000;
            xhr.ontimeout = function() { //添加请求超时回调函数
                alert('网络异常，请求取消')
            }
            //如果浏览器没有网络，调用该函数
            xhr.onerror = function() {
                alert('你的网络似乎出现了一点问题')
            }


            // 2.初始化，设置请求方法和url
            xhr.open('get','http://localhost:3000/delay');
            // 3.发送
            xhr.send(''); //get请求这里为空
            // xhr.send('a:100&b:200'); 可以设置很多种格式
            // 4.处理服务端返回的结果
            xhr.onreadystatechange = function() {
                // xhr对象中的属性，表示状态； 0 未初始化  1 open方法已调用完毕  2 send方法已调用完毕
                                            //  3 服务端返回了部分的结果   4 服务端返回了所有的结果
                if(xhr.readyState === 4) { //服务端返回了所有的结果
                    //还要接着判断响应的状态码 200 404 401 500
                    if(xhr.status >= 200 && xhr.status < 300) {
                        //处理结果  行 头 空行 体
                        console.log(xhr.response); //响应体 
                        box.innerHTML = xhr.response

                    }
                }
            }
        })
    </script>
</body>
</html>